<template>
	<div class="home-weekend">
		<div class="hot-head">周末去哪儿</div>
		<div class="item-wrap" v-for="item in weekendList" :key="item.id">
			<div class="img-wrap">
				<img :src="item.imgUrl" class="item-img">
			</div>
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
  	weekendList: {
  		type: Array,
  		required: true
  	}
  },
  data() {
    return {
      	msg: 'HomeWeekend'
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/var.styl'
@import '~styles/mixin.styl'
	.home-weekend
		margin-top: .2rem
		.hot-head
			line-height: 0.8rem
			background-color: $titleColor
			text-indent: .2rem
		.item-wrap
			// display: flex
			overflow: hidden
			.img-wrap
				oh()
				height: 0
				padding-bottom: 37.09%
				posr()
			.item-img
				width: 100%
				max-height: 100%
				posa()
			.item-info
				width: 100%
				padding: 0.1rem
			.item-title
				line-height: .58rem
				font-size: .32rem
				color: #333
				to()
			.item-desc
				width: 100%
				line-height: 0.4rem
				color: #ccc
				to()
</style>
